<!--
 * @Author: 毕晨曦 
 * @Date: 2024-12-08 19:48:16
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-12-10 22:41:16
 * @FilePath: /xing-fu-da-zi-weapp/src/components/radar/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
import { matchMember } from "@/api/appNumber";
import dayjs from "dayjs";
const IMG_URL = import.meta.env.VITE_BASE_URL_IMG;

const searchStatus = ref(false);
const personal = uni.getStorageSync("userInfo");

const dataList = ref([]);
const relationshipData = {
  G1: "适合谈恋爱",
  G2: "适合做普通朋友",
  G3: "适合做亲密好友",
  G4: "适合做职场同事",
  G5: "适合做事业伙伴",
  G6: "适合结婚",
  无: "完全一样的两个人",
};

async function fetchMatchmember() {
  if (!personal.fourCode) {
    uni.showToast({
      title: "请先完善个人信息里",
      icon: "none",
    });
    uni.navigateTo({
      url:
        `/pages/identityApplication/index?data=` +
        encodeURIComponent(JSON.stringify(personal)),
    });
    return;
  }

  searchStatus.value = true;
  const { data } = await matchMember(personal.fourCode);

  setTimeout(() => {
    dataList.value = data;
    dataList.value = dataList.value.map((item) => {
      item.matchResult = item.matchResult.map((i) => {
        return relationshipData[i];
      });
      return item;
    });
    searchStatus.value = false;
  }, 2000);
}

function jumpDetail(item) {
  uni.navigateTo({
    url: "/pages/details/index?id=" + item.nid,
  });
}
</script>

<template>
  <view>
    <view class="conatiner">
      <view class="content">
        <view class="radar" v-show="searchStatus"> </view>
      </view>
    </view>
    <view class="btn-content">
      <u-button
        text="搜索"
        color="#81d8d0"
        @click="fetchMatchmember"
        :loading="searchStatus"
      ></u-button>
    </view>
    <view class="list-content">
      <view
        v-for="i in dataList"
        :key="i.id"
        class="item"
        @click="jumpDetail(i)"
      >
        <view style="width: 100%">
          <image
            style="width: 100%"
            :src="
              i?.avatar
                ? IMG_URL + i?.avatar
                : 'https://wdwctech.com/img/nan-avatar.png'
            "
          />
          <view>
            <text style="font-size: 20rpx">{{ i.nickName }}，</text>
            <text style="font-size: 18rpx"
              >年龄：{{ dayjs().diff(i.birthday, "year") }}，</text
            >
            <text style="font-size: 18rpx">星座：{{ i.star }}</text>
          </view>
          <view v-for="m in i.matchResult" :key="i.id + m" class="tip-content">
            <text>{{ m }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
$green: #20ff4d;
$black: #000000;
$gray: #eee;

$grid-opacity: 0.15;

.conatiner {
  height: 500rpx;
  background-color: #111;
  font-size: 10px;
}

.content {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba($green, $grid-opacity) 25%,
      rgba($green, $grid-opacity) 26%,
      transparent 27%,
      transparent 74%,
      rgba($green, $grid-opacity) 75%,
      rgba($green, $grid-opacity) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba($green, $grid-opacity) 25%,
      rgba($green, $grid-opacity) 26%,
      transparent 27%,
      transparent 74%,
      rgba($green, $grid-opacity) 75%,
      rgba($green, $grid-opacity) 76%,
      transparent 77%,
      transparent
    );
  background-size: 7rem 7rem;
  background-position: -5.2rem -5.2rem;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
}

.radar {
  background: -webkit-radial-gradient(
      center,
      rgba($green, 0.3) 0%,
      rgba($green, 0) 75%
    ),
    // background glow
    -webkit-repeating-radial-gradient(
        rgba($green, 0) 5.8%,
        rgba($green, 0) 18%,
        rgba($green, 1) 18.6%,
        rgba($green, 0) 18.9%
      ),
    // concentric circles
    -webkit-linear-gradient(
        90deg,
        rgba($green, 0) 49.5%,
        rgba($green, 1) 50%,
        rgba($green, 1) 50%,
        rgba($green, 0) 50.2%
      ),
    // center line - vertical
    -webkit-linear-gradient(
        0deg,
        rgba($green, 0) 49.5%,
        rgba($green, 1) 50%,
        rgba($green, 1) 50%,
        rgba($green, 0) 50.2%
      );

  background: radial-gradient(center, rgba($green, 0.3) 0%, rgba($green, 0) 75%),
    // background glow
    repeating-radial-gradient(
        rgba($green, 0) 5.8%,
        rgba($green, 0) 18%,
        rgba($green, 1) 18.6%,
        rgba($green, 0) 18.9%
      ),
    // concentric circles
    linear-gradient(
        90deg,
        rgba($green, 0) 49.5%,
        rgba($green, 1) 50%,
        rgba($green, 1) 50%,
        rgba($green, 0) 50.2%
      ),
    // center line - vertical
    linear-gradient(
        0deg,
        rgba($green, 0) 49.5%,
        rgba($green, 1) 50%,
        rgba($green, 1) 50%,
        rgba($green, 0) 50.2%
      ); // center line - horizontal
  width: 300rpx;
  height: 300rpx;
  max-height: 300rpx;
  max-width: 300rpx;
  position: relative;
  left: 50%;
  top: 250rpx;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.2rem solid $green;
  overflow: hidden;

  &:before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: blips 5s infinite;
    animation-timing-function: linear;
    animation-delay: 1.4s;
  }

  &:after {
    content: " ";
    display: block;
    background-image: linear-gradient(
      44deg,
      rgba(0, 255, 51, 0) 50%,
      rgba(0, 255, 51, 1) 100%
    );
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: radar-beam 5s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
  }
}

@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes blips {
  14% {
    background: radial-gradient(
      2vmin circle at 75% 70%,
      rgba(#fff, 1) 10%,
      rgba($green, 1) 30%,
      rgba(#fff, 0) 100%
    );
  }
  14.0002% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      );
  }
  25% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 56% 86%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      );
  }
  26% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 56% 86%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      );
    opacity: 1;
  }
  100% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 56% 86%,
        rgba(#fff, 1) 10%,
        rgba($green, 1) 30%,
        rgba(#fff, 0) 100%
      );
    opacity: 0;
  }
}

.btn-content {
  padding: 30rpx;
}

.list-content {
  padding-top: 30rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
  padding-left: 1.5%;
  padding-bottom: 20rpx;
  .item {
    width: 47%;
    margin-top: 15rpx;
    border: #81d8d0 2rpx solid;
    border-radius: 8rpx;
    padding-bottom: 15rpx;
    .tip-content {
      padding-top: 4rpx;
      font-size: 18rpx;
    }
  }
}
</style>
